{{define "content"}}

<div class="container-fluid">
    <div class="row" style="text-align: center;">
        <h2># 编辑物品-{{.title}}</h2>
    </div>
    <div class="row">
        <div class="col">
            <form action="/item" method="POST">
                <input name="ID" type="text" class="form-control" id="ID" value="{{ .item.ID }}" hidden>

                <div class="row mb-3">
                    <label for="BrandName" class="col-sm-2 col-form-label">*品牌</label>
                    <div class="col-sm-10">
                        <input name="BrandName" type="text" class="form-control" id="BrandName" onchange="checkValue();"
                            value="{{ .item.BrandName }}">
                    </div>
                </div>
                <div class="d-flex justify-content-end">
                    <input class="btn btn-primary" type="button" value="条形码" data-bs-toggle="modal"
                        data-bs-target="#staticBackdrop">
                </div>
                <div class="row mb-3">
                    <label for="ProductName" class="col-sm-2 col-form-label">*商品名称</label>
                    <div class="col-sm-10">
                        <input name="ProductName" type="text" class="form-control" id="ProductName"
                            onchange="checkValue();" value="{{ .item.ProductName }}">

                    </div>
                </div>
                <div class="row mb-3">
                    <label for="Price" class="col-sm-2 col-form-label">总价</label>
                    <div class="col-sm-10">
                        <input name="Price" type="text" placeholder="￥" class="form-control" id="Price"
                            onchange="checkValue();" value="{{ .item.Price }}">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="Amount" class="col-sm-2 col-form-label">数量</label>
                    <div class="col-sm-10">
                        <input name="Amount" type="number" placeholder="数量" class="form-control" id="Amount"
                            value="{{ .item.Amount }}">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="Status" class="col-sm-2 col-form-label">状态</label>
                    <div class="col-sm-10">
                        <select name="Status" class="form-select form-select-sm" id="Status">
                            <option value="1" {{ if eq .item.Status 1 }}selected{{end}}>已入库</option>
                            <option value="2" {{ if eq .item.Status 2 }}selected{{end}}>正在使用</option>
                            <option value="3" {{ if eq .item.Status 3 }}selected{{end}}>已过期</option>
                            <option value="4" {{ if eq .item.Status 4 }}selected{{end}}>已销毁</option>
                        </select>
                    </div>
                </div>
                {{ if eq .item.ID 0}}
                <div class="mb-3 d-grid gap-2 d-flex justify-content-end">
                    <div class="form-check form-switch">
                        <input name="opennow" class="form-check-input" type="checkbox" role="switch" id="opennow"
                            onchange="if(this.checked){document.querySelector('#Status').value = 2;}else{document.querySelector('#Status').value = 1;}">
                        <label class="form-check-label" for="opennow">立即启用</label>
                    </div>
                </div>
                {{end}}
                <p>
                    <a class="btn btn-primary" data-bs-toggle="collapse" href="#details" role="button"
                        aria-expanded="false" aria-controls="details">
                        展开详细信息 ▼
                    </a>
                </p>
                <div class="collapse" id="details">
                    <div class="row mb-3">
                        <label for="Source" class="col-sm-2 col-form-label">来源</label>
                        <div class="col-sm-10">
                            <select name="Source" class="form-select form-select-sm" id="Source"
                                value="{{.item.Source}}">
                                <option value="线下" {{if eq .item.Source "线下" }}selected{{end}}>线下</option>
                                <option value="淘宝" {{if eq .item.Source "淘宝" }}selected{{end}}>淘宝</option>
                                <option value="天猫" {{if eq .item.Source "天猫" }}selected{{end}}>天猫</option>
                                <option value="京东" {{if eq .item.Source "京东" }}selected{{end}}>京东</option>
                                <option value="拼多多" {{if eq .item.Source "拼多多" }}selected{{end}}>拼多多</option>
                                <option value="美团" {{if eq .item.Source "美团" }}selected{{end}}>美团</option>
                                <option value="美团" {{if eq .item.Source "抖音" }}selected{{end}}>抖音</option>
                            </select>
                        </div>
                    </div>


                    <div class="row mb-3">
                        <label for="Desc" class="col-sm-2 col-form-label">备注</label>
                        <div class="col-sm-10">
                            <textarea name="Desc" class="form-control" id="Desc">{{ .item.Desc }}</textarea>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="ExpireDate" class="col-sm-2 col-form-label">到期日期</label>
                        <div class="col-sm-10">
                            <input name="ExpireDate" type="date" class="form-control" id="ExpireDate"
                                value='{{ .item.ExpireDate.Format "2006-01-02" }}'>
                        </div>
                    </div>
                   
                    <div class="row mb-3" {{ if eq .item.ID 0}}hidden{{end}}>
                        <label for="CreateDate" class="col-sm-2 col-form-label">入库日期</label>
                        <div class="col-sm-10">
                            <input name="CreateDate" type="date" class="form-control" id="CreateDate" value='{{ .item.CreateDate.Format "2006-01-02" }}'>
                        </div>
                    </div>
                    
                    {{if .item.DestroyDate}}
                    <div class="row mb-3">
                        <label for="DestroyDate" class="col-sm-2 col-form-label">销毁日期</label>
                        <div class="col-sm-10">
                            <input name="DestroyDate" type="date" class="form-control" id="DestroyDate"
                                value='{{ .item.DestroyDate.Format "2006-01-02" }}'>
                        </div>
                    </div>
                    {{end}}
                                      
                </div>
                <div class="d-grid gap-2 d-flex justify-content-end" style="margin-bottom: 64px;">
                    {{ if ne .item.ID 0}}<button id="delete-btn" type="button" data-bs-toggle="modal"
                        data-bs-target="#deleteModel" class="btn btn-danger btn-sm">删除</button>{{end}}
                    <button type="button" class="btn btn-secondary btn-sm" onclick="window.history.back();">返回</button>
                    <button id="submit" type="submit" class="btn btn-primary btn-sm">
                        {{ if eq .item.ID 0}}确认{{else}}修改{{end}}</button>
                </div>

            </form>

            <script>
                function checkValue() {
                    let submitbtn = document.getElementById("submit");

                    ["ProductName",  "BrandName"].forEach(element => {
                        let b = document.getElementById(element);
                        if ("" == b.value || 0 == b.value) {
                            b.style.borderColor = "red";
                            submitbtn.disabled = true;
                            return
                        } else {
                            b.style.borderColor = "#ced4da";
                            submitbtn.disabled = false;
                        }
                    });

                }
                checkValue();
            </script>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" id="deleteModel" style="color: black;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确认删除！</p>
                <p id="del-msg"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <a href="#" class="btn btn-danger" onclick='deleteItem("{{ .item.ID }}");'>确认</a>
                <script>
                    function deleteItem(id) {
                        document.getElementById("barcodemsg").innerText = "";
                        var xhr = new XMLHttpRequest();
                        xhr.open("DELETE", "/item?id=" + id, true);
                        xhr.onload = function (e) {
                            if (xhr.readyState === 4) {
                                if (xhr.status === 200) {
                                    window.location.href="/items";
                                } else {
                                    document.getElementById("barcodemsg").innerText = xhr.statusText;
                                }
                            }
                        };
                        xhr.onerror = function (e) {
                            document.getElementById("barcodemsg").innerText = xhr.statusText;
                        };
                        xhr.send();
                        document.getElementById("del-msg").innerText = "正在删除……";
                    }
                </script>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog" style="color: black;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">拍摄条形码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input id="camera" type="file" accept="image/*" capture="camera" onchange="cameraChanged(this);">
                <img id="preview" style="width:100%; height: 400px">
                <script>
                    function cameraChanged(e) {
                        //当没选中图片时，清除预览
                        if (e.files.length === 0) {
                            document.querySelector('#preview').src = '';
                            return;
                        }

                        //实例化一个FileReader
                        var reader = new FileReader();

                        reader.onload = function (r) {
                            //当reader加载时，把图片的内容赋值给
                            document.querySelector('#preview').src = r.target.result;
                        };

                        //读取选中的图片，并转换成dataURL格式
                        reader.readAsDataURL(e.files[0]);
                    }
                </script>
            </div>
            <div class="modal-footer">
                <span id="barcodemsg"></span>
                <div id="spinner" class="spinner-border" role="status" hidden>
                    <span class="visually-hidden">Loading...</span>
                </div>
                <button id="dismissbtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="barcodeReady(this);">确定</button>
                <script>
                    function barcodeReady(btn) {
                        var xhr = new XMLHttpRequest();
                        xhr.open("POST", "/api/barcode", true);
                        xhr.onload = function (e) {
                            if (xhr.readyState === 4) {
                                if (xhr.status === 200) {
                                    console.log(xhr.responseText);
                                    document.getElementById("barcodemsg").innerText = "";
                                    document.getElementById("spinner").hidden=true;
                                    document.getElementById("dismissbtn").click();
                                    var info = JSON.parse(xhr.responseText);
                                    ["ProductName", "Desc", "BrandName"].forEach(element => {
                                        document.getElementById(element).value = info[element];
                                    });
                                } else {
                                    document.getElementById("barcodemsg").innerText = xhr.statusText;
                                }
                                checkValue();
                            }
                        };
                        xhr.onerror = function (e) {
                            document.getElementById("barcodemsg").innerText = xhr.statusText;
                        };
                        xhr.send(document.querySelector('#preview').src);
                        document.getElementById("spinner").hidden=false;
                        document.getElementById("barcodemsg").innerText = "请等待……";
                    }
                </script>
            </div>
        </div>
    </div>
</div>


{{end}}